<template>
    <div id="importBracelet">
        <el-breadcrumb separator="/" class="common-bread">
            <el-breadcrumb-item>导入手环</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="list_head">
                <el-button type="primary" @click="$router.push('/bracelet')" class="fr ml10">返回</el-button>
            </div>

            <div class="clear mt10">
                <div id="sec_1">
                    1、下载手环导入模板，批量导入手环信息
                    <a href="https://swapp-test-images.oss-cn-hangzhou.aliyuncs.com/physical/%E6%89%8B%E7%8E%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
                        class="mylink">下载模板</a>
                </div>
                <div id="sec_2">
                    <div id="step2">
                        <div style="text-align: center;">
                            2、填写并上传文件
                        </div>
                        <div class="sec-params">
                        </div>

                        <el-upload :action="actionUrl" :on-success="handleSuccess" :data="imData" :on-error="handleError"
                            name="uploadFile" :show-file-list='false' class="mybtn">
                            <el-button type="primary">选择文件</el-button>
                        </el-upload>
                    </div>
                </div>
            </div>

            <div class="list" v-if="showList">
                <div id="sec_3">
                    <div>
                        <span>导入成功人数</span>
                        <br>
                        <span class="num">{{rightNum}}人</span>
                    </div>
                    <div>
                        <span>导入失败人数</span>
                        <br>
                        <span class="num">{{wrongNum}}人</span>
                    </div>
                </div>
                <div class="list-result">
                    <div class="tableTitle">
                        导入错误记录
                        <el-button type="primary" @click="getErrorList" style="float:right;">重新获取导入结果</el-button>
                    </div>
                    <el-table :data="list" border align="center">
                        <el-table-column prop="lineNum" label="行数" width="120">
                        </el-table-column>
                        <el-table-column prop="errorMessage" label="错误信息">
                        </el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination v-show="this.wrongNum > 0" layout="prev, pager, next, jumper" :page-size="10"
                            :current-page="currentPage" :total="wrongNum" @current-change="handleCurrentChange">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                actionUrl: this.$util.domain + "/adminapi/bangle/v1/import/excel",
                importId: "",
                imData: { inUser: "" },
                rightNum: 0,
                wrongNum: 0,
                currentPage: 1,
                list: [0],
                showList: false
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.imData.inUser = this.user.userId;
        },
        methods: {
            handleSuccess(response) {
                if (response.error !== 10000) {
                    if (response.error == -10000) {
                        this.$util.errorMsg("服务器开小差");
                    } else {
                        this.$util.errorMsg(response.message);
                    }
                } else {
                    this.importId = response.data;
                    this.showList = true;
                    this.getErrorList();
                }
            },
            handleError(response) {
                if (response.status === 403) {
                    this.SIGNOUT();
                    location.href = "/login";
                }
                this.$util.errorMsg("文件上传失败");
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getErrorList();
            },
            getErrorList() {
                this.$axios.post("/adminapi/bangle/v1/import/result", {
                    pageSize: 10,
                    pageNum: this.currentPage,
                    importId: this.importId * 1
                }).then(response => {
                    if (response.data.error == 10000) {
                        let dataList = response.data.data.list;
                        // this.imTotalCount = response.data.data.totalCount;
                        // this.imCurrentCount = response.data.data.currentCount;
                        this.wrongNum = response.data.data.wrongNum;
                        this.rightNum = response.data.data.rightNum;

                        this.list = [];
                        if (dataList && dataList.length) this.list = dataList;
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                }).catch((response) => { });
            }
        }
    }
</script>
<style>
    #importBracelet{
        height: inherit;
    }
    #importBracelet #sec_1 {
        width: 70%;
        margin-left: 15%;
        text-align: center;
        line-height: 60px;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 25px;
    }

    #importBracelet .el-upload--text {
        width: auto;
        height: auto;
    }

    #importBracelet #sec_2 {
        width: 70%;
        margin-left: 15%;
        color: #333333;
        border: solid 1px #b2b2b2;
        margin-top: 40px;
    }

    #importBracelet #step2 {
        color: #333333;
        margin-top: 10px;
        line-height: 40px;
    }

    #importBracelet #step2 .mybtn {
        display: block;
        width: 100px;
        margin: 0 auto 10px;
    }

    #importBracelet #sec_1 .mylink {
        color: #0398FF;
    }

    #importBracelet #sec_3 {
        width: 70%;
        margin-left: 15%;
        height: 150px;
        text-align: center;
        color: #333333;
        border: solid 1px #b2b2b2;
        font-size: 24px;
    }

    #importBracelet #sec_3>div {
        float: left;
        text-align: center;
        width: 49.5%;
        height: 150px;
        padding-top: 30px;
        box-sizing: border-box;
    }

    #importBracelet #sec_3>div:first-child {
        width: 50%;
        border-right: solid 1px #b2b2b2;
    }

    #importBracelet #sec_3 .num {
        color: #00c28b;
        margin-top: 25px;
        display: inline-block;
    }

    #importBracelet .list-result {
        width: 70%;
        margin-left: 15%;
        padding-top: 40px;
    }

    #importBracelet .tableTitle {
        text-align: center;
        color: #333333;
        font-size: 18px;
        font-family: "Microsoft YaHei";
        margin-bottom: 10px;
    }
</style>